.context-menu {
  position: absolute;
  width: 200px;
  min-height: 10px;
  border-radius: 10px;
  background-color: #3F4756;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  z-index: 9999;
  color: white;
  user-select: none;
}
.context-menu .menu-item {
  width: 100%;
  padding: 10px 20px;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(121, 121, 121, 0.635);
  font-size: 24px;
  transition: all ease 0.5s;
  border-radius: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.context-menu .menuItems-hover {
  background-color: #2f2f2f;
}
.context-menu .menu-items-click {
  font-size: 20px;
  background-color: #a0a0a0;
}
.slideInDownMine {
  -webkit-animation-name: slideInDownMine;
  animation-name: slideInDownMine;
}
@-webkit-keyframes slideInDownMine {
  from {
    -webkit-transform: translate3d(0, -5%, 0);
    transform: translate3d(0, -5%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInDownMine {
  from {
    -webkit-transform: translate3d(0, -5%, 0);
    transform: translate3d(0, -5%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes slideOutUpMine {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -10%, 0);
    transform: translate3d(0, -10%, 0);
  }
}
@keyframes slideOutUpMine {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -10%, 0);
    transform: translate3d(0, -10%, 0);
  }
}
.slideOutUpMine {
  -webkit-animation-name: slideOutUpMine;
  animation-name: slideOutUpMine;
}
